<template>
  <div class="box">
      <div>
        <div class="top">
            <span>动态详情</span>
            <div />
            </div>
        <el-row :span="24" justify="start" type="flex">
          <el-col :span="10">
            <div class="title">
              <span class="font" style="margin-right:15px">发布人:</span>
              <span class="font">{{ updatesMessage.memberName }}</span>
            </div>
            <div class="title">
              <span class="font" style="margin-right:15px">联系方式:</span>
              <span class="font">{{ updatesMessage.phone }}</span>
            </div>
            <div class="title">
              <span class="font" style="margin-right:15px">公司:</span>
              <span class="font">{{ updatesMessage.workUnit }}</span>
            </div>
            <div class="title">
              <span class="font" style="margin-right:15px">详情信息:</span>
              <span class="font">{{ updatesMessage.trendsContent }}</span>
            </div>
            <div class="title">
              <span class="font" style="margin-right:15px;">图片:</span>
              <span class="font" v-if="updatesMessage.commonFileRequests == ''">无</span>
              <div class="image" v-if="updatesMessage.commonFileRequests != ''">
              <img style="width:200px;height: 120px;" :src="item.url" v-for="(item,index) in updatesMessage.commonFileRequests" :key="index" />
              </div>
            </div>
            <div class="label">
              <span class="font" style="margin-right:15px">时间:</span>
              <span class="font">{{ updatesMessage.releaseTime }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
  </div>
</template>
<script>
import { getTrends } from '@/api/society'
export default {
  data(){
    return{
      //文件列表
      fileList:'',
      updatesMessage:[],
      form:{
        reason: '',
        status: '',
        tid: ''
      },
      //弹出框
      open:false,
    }
  },
  created() {
    this.getMessage()
  },
  methods:{
    getMessage(){ 
      let params = this.$route.query.key
      getTrends(params).then(res =>{
        if(res.code == 200){
          this.updatesMessage = res.data
        }
      })
    },
    //重置
    reset(){
      this.form = {
        reason: '',
        status: '',
        tid: ''
      }
    },
    //提交
    submitForm(data){
      this.form.tid = 
      this.form.status = data
      let params = {
        ...this.form
      }
      addArticle(params).then(res=>{
        if(res.code == 200){
            this.$message({
            message: '上传成功',
            type: 'success'
          });
          setTimeout(this.back(), 1000);
        }
      }
      )
    },
      //返回页面操作
    back() {
    this.$router.push({
      path: "/society/articleList",
    });
    },
  }
}

</script>
<style scoped>
.box{
  padding:24px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}
.box > div{
  height: 100vh;
  background-color: white;
  padding: 24px;
}
.font{
  font-family: Alibaba PuHuiTi;
  font-size: 15px;
  color: #4F5570;
  font-weight: 400;
}
.top{
  margin: 40px 0px 40px 56px;
  display: flex;
}
.top > span {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  margin-left: 8px;
  width: 90px;
}
.top > div {
  border-bottom: 1px solid #e5e5e5;
  height: 15px;
  width: 100%;
  padding-bottom: -20px;
  margin-left: 15px;
}
.top::before {
  content: "";
  width: 3px;
  background: #2854b7;
  height: 20px;
  border-radius: 2px;
}
.title,.button,.label{
  margin-left:70px;
  margin-bottom: 30px;
}
.button el-button:first-child(){
  width:80px;
  line-height: 20px;
  height: 40px;
}
.button el-button:last-child(){
  margin-left: 30px;
  width:110px;
  height: 40px;
  border:none
}
.image{
  margin-top:30px;
  display: flex;
}
</style>